﻿
@{
    Layout = null;
}

<!doctype html>
<html ng-app="Emergency">
<head>
    <link href="~/Assets/DashBoard/css/default.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="~/Assets/DashBoard/css/mobile.css" />
    <link href="~/Assets/DashBoard/css/scanboard.css" rel="stylesheet" />
    <link rel='stylesheet' href='~/Assets/DashBoard/css/jquery-ui.css'>
    <link href="~/Assets/Styles/libs/weather.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Assets/DashBoard/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="~/Assets/DashBoard/js/common.js"></script>
    <script src="~/Assets/Scripts/base/angular.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,user-scalable=no">

    <title>安全环保应急管理平台 </title>
    <style>
        .menu_item {
            cursor: pointer;
        }

        body {
            height: 100%;
        }

        .menu_right {
            float: left;
            position: absolute;
            top: 0px;
            left: 600px;
            width: 800px;
        }

        .menu_box {
            background: rgba(18, 78, 216,.4);
            width: 180px;
            height: 180px;
            float: left;
            margin-left: 50px;
            margin-top: 50px;
            border-radius: 7px;
            cursor: pointer;
        }

        .menu_item {
            width: 40px;
            height: 40px;
            float: left;
            margin-left: 12px;
            margin-top: 23px;
        }

            .menu_item b {
                margin: 2px;
                font-size: 17px;
                font-weight: normal;
            }

        .menu_title {
            width: 100%;
            float: left;
            font-weight: bold;
            text-align: center;
            margin-top: 65px;
            font-size: 25px;
            color: white;
        }

        .menu_link {
            float: left;
            margin: 30px;
            cursor: pointer;
        }

            .menu_link p {
                width: 100%;
                text-align: center;
                margin-top: 10px;
                font-weight: bold;
                font-size: 20px;
            }

        .IsValid {
            width: 10px;
            height: 10px;
            background-color: deepskyblue;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            margin: 5px;
            margin-left: -9px;
            margin-bottom: -5px;
            position: inherit;
        }

        .NotValid {
            width: 10px;
            height: 10px;
            background-color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            margin: 5px;
            margin-left: -9px;
            margin-bottom: -5px;
            position: inherit;
        }

    </style>
</head>
<body ng-controller="EmergencyController" ng-init="GetEmergencyModule();GetEPI();GetWaterWPI();GetExhaustAPI();">
    <div class="weather" style="position:absolute;top:20px;left:30px;">
        <p style="font-family:electronicFont;" id="weather_pvg">456</p>
        <p style="font-family:electronicFont;" id="weather_dc">123</p>
    </div>
    <div id="wrapper">
        <h1 style="font-size:45px;line-height:52px;">&nbsp;&nbsp;智慧管控平台</h1>
        <!--<h2><strong>安环引擎</strong><sub></sub><b class="logoline"></b><b class="logoline1"></b><b class="logoline2"></b><b class="logoline3"></b><b class="logoline4"></b></h2>-->
        <!--时间区-->

        <div class="date-timer">
            <p>
                <strong id="H"></strong>
                <strong>:</strong>
                <strong id="M"></strong>
                <strong id="S" class="hide"></strong>
            </p>
            <em id="D"></em>
            <ul>
                <li id="Y"></li>
                <li id="MH"></li>
                <li id="TD"></li>
            </ul>
        </div>

        <div class="submenu">
            <div></div>
        </div>
        <div class="center-area">

            <div class="menulist">
                <div class="menu_left" style="float:left;margin-left:-100px;">
                    <div class="big-index-1" style="height:580px;width:100px;">
                        <div style="margin-top:20px; cursor:pointer;   box-sizing: border-box;border: 2px solid red;border-image: url(../Assets/DashBoard/images/border.png) 51 38 21 132;border-width: 2.125rem 1.583rem 0.875rem 5.5rem;width:270px;height:100px; font-weight:bold;"><a href="part2" style="color:white;font-size:27px;">安全生产</a></div>
                        <div style="margin-top:100px; cursor:pointer; box-sizing: border-box;border: 2px solid red;border-image: url(../Assets/DashBoard/images/border.png) 51 38 21 132;border-width: 2.125rem 1.583rem 0.875rem 5.5rem;width:270px;height:100px;font-weight:bold;"><a href="part2" style="color:white;font-size:27px;">环境保护</a></div>
                        <div style="margin-top:100px; cursor:pointer; box-sizing: border-box;border: 2px solid red;border-image: url(../Assets/DashBoard/images/border.png) 51 38 21 132;border-width: 2.125rem 1.583rem 0.875rem 5.5rem;width:270px;height:100px;font-weight:bold;"><a href="part2" style="color:white;font-size:27px;">应急管理</a></div>
                    </div>
                </div>
                <div class="menu_center" style="float:left;">
                    <div style="position:absolute; top:170px;left:340px;width:200px;">
                        <h2><strong style="font-size:27px;">风险分级管控</strong><b class="logoline"></b><b class="logoline1"></b><b class="logoline2"></b><b class="logoline3"></b><b class="logoline4"></b></h2>
                    </div>
                </div>
                <div class="menu_center" style="float:left;">
                    <div style="position:absolute; top:380px;left:340px;width:200px;">
                        <h2><strong style="font-size:27px;">隐患排查治理</strong><b class="logoline"></b><b class="logoline1"></b><b class="logoline2"></b><b class="logoline3"></b><b class="logoline4"></b></h2>
                    </div>
                </div>
                <div class="menu_right" style="">
                    <div class="menu_box" style="" ng-repeat="x in ModuleList" ng-click="ShowAppList(x.AppList);">
                        @*<div class="menu_item" ng-repeat="y in x.AppList">
                            <div class="IsValid" ng-show="y.Valid==1"></div>
                            <div class="NotValid" ng-show="y.Valid==0"></div>
                            <img ng-src="{{y.AppIcon}}" width="40" style="display:block;" />
                            <b></b>
                        </div>*@
                        <div class="menu_title">{{x.ModuleName}}</div>
                    </div>
                </div>
            </div>
            <div class="details2-area">

            </div>
        </div>
        <div class="right-area">
            <h3>安环指数 <b></b></h3>
            <div class="area-inbox-1">
                <dl>
                    <dt style="color:gray;font-weight:bold;">绿色园区EPI</dt>
                    <dd class="font12"><span style="color:green;">{{EPIScore}}</span><b></b></dd>
                    <dt style="color:gray;font-weight:bold;" class="ml-20">废水WPI</dt>
                    <dd class="font-blue ml-20"><span style="color:green;">{{WPIScore}}</span><b></b></dd>
                    <dt style="color:gray;font-weight:bold;">废气API</dt>
                    <dd><span style="color:green;">{{APIScore}}</span><b></b></dd>
                </dl>
                <div class="round-1"></div>
                <div class="round-2"></div>
                <div class="round-3">88</div>
                <div class="round-4"></div>
            </div>

            <div class="area-inbox-2" style="width:300px;height:400px;">
                <div class="area-text">
                    <b class="animation-line1"></b>
                    <h4 style="color:red;font-weight:bold;">未处理报警：</h4>
                    <p class="text_container" style="color:rgb(251, 139, 139);">
                        <script>
                            var s = '202B车间排口 2021-01-21 11:12 PH值超标 PH:5.9053 参考值：6-9';
                            var con = $('.text_container');
                            var index = 0; var length = s.length;
                            var tId = null;
                            function start() {
                                con.text('');
                                tId = setInterval(function (
                                ) {
                                    con.append(s.charAt(index));
                                    if (index++ === length) {
                                        setTimeout(function () {
                                            clearInterval(tId);
                                            index = 0;
                                            start();
                                        }, 5000);
                                    }
                                }, 300);
                            }
                            start();
                        </script>
                    </p>
                    <b class="animation-line2"></b>
                </div>
            </div>
            <div class="area-text" style="margin-top:300px;">
                <b class="animation-line1"></b>
                <h4 style="color:red;font-weight:bold;">已处理报警：</h4>
                <p class="text_container" style="color:rgb(251, 139, 139);">
                    总排口总铬超标:0.59 参考值：0-0.5
                </p>
                <b class="animation-line2"></b>
            </div>
        </div>

    </div>
    <div class="filterbg" style="display: block;background: rgba(18, 78, 216,.4);"></div>
    <div class="carInfo" style="display: block; width: 60%; height: 50%; background: rgba(18, 78, 216,.9);">
        <a href="javascript:;" class="carClose" style="display: block;"></a>
        <div class="menu_links" ng-repeat="x in AppList">
            <div class="menu_link">
                <a ng-href="{{x.AppLink}}" style="color:white;">
                    <div class="IsValid" ng-show="x.Valid==1"></div>
                    <div class="NotValid" ng-show="x.Valid==0"></div>
                    <img ng-src="{{x.AppIcon}}" width="60" style="display:block;" />
                    <p>{{x.AppName}}</p>
                </a>
            </div>
        </div>
    </div>
</body>
<script src="~/Assets/Scripts/pg/Emergency.js"></script>
</html>
<script>
    GetWeather();
    function GetWeather() {
        $.ajax({
            type: 'GET',
            url: 'http://wthrcdn.etouch.cn/weather_mini?citykey=101020300',
            dataType: 'JSON',
            error: function () {
                alert('网络错误');
            },

            success: function (res) {
                if (res != null && res.data != null && res.data.forecast.length > 0) {
                    var today = res.data.forecast[0];
                    var fengli = today.fengli;
                    var htmlcontent = "<img style='width:22px;' src='/Assets/Images/location.png' />大场: " + today.type + "&nbsp;&nbsp;" + today.high + "&nbsp;&nbsp;" + today.low + "&nbsp;&nbsp;" + today.fengxiang + "&nbsp;&nbsp;" + fengli.substring(fengli.lastIndexOf('[') + 1, fengli.indexOf(']')) + "<br/>";
                    $("#weather_dc").html(htmlcontent);
                }
            }
        });

        $.ajax({
            type: 'GET',
            url: 'http://wthrcdn.etouch.cn/weather_mini?citykey=101020600',
            dataType: 'JSON',
            error: function () {
            },

            success: function (res) {
                if (res != null && res.data != null && res.data.forecast.length > 0) {
                    var today = res.data.forecast[0];
                    var fengli = today.fengli;
                    var htmlcontent = "<img style='width:22px;' src='/Assets/Images/location.png' />浦东: " + today.type + "&nbsp;&nbsp;" + today.high + "&nbsp;&nbsp;" + today.low + "&nbsp;&nbsp;" + today.fengxiang + "&nbsp;&nbsp;" + fengli.substring(fengli.lastIndexOf('[') + 1, fengli.indexOf(']'));
                    $("#weather_pvg").html(htmlcontent);
                }
            }
        });
    }
    $('.filterbg').hide();
    $('.carInfo').hide();
    $('.menu_box').on('click', function () {
        $('.filterbg').show();
        $('.carInfo').show();
        $('.carInfo').width('3px');
        $('.carInfo').animate({ height: '50%' }, 400, function () {
            $('.carInfo').animate({ width: '62%' }, 400);
        }); 213
        setTimeout(function () {
            $('.infoBox').show();
            $('.carClose').css('display', 'block');
        }, 800);

    });
    $('.carClose').on('click', function () {
        $('.carClose').css('display', 'none');
        $('.infoBox').hide();

        $('.carInfo').animate({ width: '3px' }, 400, function () {
            $('.carInfo').animate({ height: 0 }, 400);
        });
        setTimeout(function () {
            $('.filterbg').hide();
            $('.carInfo').hide();
            $('.carInfo').width(0);
        }, 800);
    });
</script>